[docs-infra] Add `@focus` and Linter to Automatically Apply by dav-is · Pull Request #1303 · mui/mui-public

dav-is · 2026-04-11T01:56:19Z

New: `@focus` annotation

Adds @focus-start / @focus-end comment annotations that mark the "important" portion of a code demo. When focus annotations are present, the code block becomes collapsible — unfocused regions are hidden behind an Expand/Collapse toggle so users see the relevant code first.

Key behaviors:

@focus-start / @focus-end mark focused regions; everything outside collapses
@padding N controls how many context lines surround focused regions (default 2)
@min N sets the minimum visible lines before collapsing kicks in (default 6)
Focus interacts correctly with @highlight and @highlight-text — highlighted lines inside a focused region use data-frame-type="focus", outside use data-frame-type="highlighted-unfocused"
Large focused blocks are capped at focusFramesMaxSize (18 lines) with a fade-out truncation indicator

New: `lintJavascriptDemoFocus` ESLint plugin

An ESLint rule (@mui/internal-docs-infra/demo-focus) that automatically inserts @focus-start / @focus-end annotations into demo files that export a default React component. It focuses the component body and collapses boilerplate (imports, type definitions, helpers).

`enhanceCodeEmphasis` improvements

@highlight-text now renders <mark> elements instead of <span data-hl>
Focus frames get proper indent tracking (data-frame-indent) for CSS nesting
Frame restructuring handles padding, truncation, and max-size splitting

Collapsible code UI

Expand/Collapse toggle with no-JS support (CSS :checked checkbox)
ResizeObserver-based scroll anchoring keeps focused code stable during expand/collapse transitions
overflow-anchor: none on changing content prevents browser scroll jumps during tab switches
Scrollbar gutter animation smooths the horizontal scrollbar appearance/disappearance
Demos render inside a container with file tabs, copy button, variant selector, and JS/TS toggle

`parseSource` / `calculateFrameRanges` updates

New frame types: focus, focus-unfocused, padding-top, padding-bottom
Truncation support: data-frame-truncated="visible" / "hidden" for fade-out on large blocks
Frame splitting at max size boundaries
Padding frames get correct indent values from adjacent focused content

Other changes

withDocsInfra: new emphasisOptions option for controlling focus behavior per-site
loadCodeVariant: passes emphasisConfig through the pipeline
Pre component: forwards data-collapsible attribute from code elements
Demo docs page updated with new sections for focus, max-size, and collapsible demos

Breaking changes

CSS needs to be updated to also support highlighting .frame instead of only .line
@highlight-text produces <mark> elements

Screenshots

Improved animation

Screencast.From.2026-04-17.20-14-59.webm

Screencast.From.2026-04-13.13-31-07.webm

code-infra-dashboard · 2026-04-15T01:44:00Z

Deploy preview

Performance

Total duration: 15.75 ms ▼-2.52 ms^(-13.8%) | Renders: 4 ⁽⁺⁰⁾ | Paint: 68.59 ms ▼-8.88 ms^(-11.5%)

Test	Duration	Renders
DataGrid mount with paint timing	2.40 ms 🔺+0.14 ms^(+6.4%)	1 ⁽⁺⁰⁾
HeavyList mount	9.23 ms ▼-2.64 ms^(-22.2%)	1 ⁽⁺⁰⁾
Counter click	4.12 ms ▼-0.03 ms^(-0.7%)	2 ⁽⁺⁰⁾

Details of benchmark changes

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

…o docs-infra/add-linter

Copilot

Pull request overview

Adds a new @focus emphasis mechanism and collapsible-code rendering across the docs-infra pipeline, plus an ESLint rule that auto-inserts focus annotations into demo files to keep rendered demos centered on the “important” code.

Changes:

Introduces @focus-start / @focus-end (and related sizing controls) into the emphasis pipeline and frame restructuring/rendering.
Adds lintJavascriptDemoFocus ESLint rule and wires it into the repo ESLint config for docs demos.
Threads new “emphasis options” through withDocsInfra, loaders, and types-highlighting pipelines; updates docs and demo styles/UI accordingly.

Reviewed changes

Copilot reviewed 132 out of 133 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds workspace link for internal docs-infra package and new dependency resolution.
packages/docs-infra/src/withDocsInfra/withDocsInfra.ts	Plumbs demo/type/MDX code-block emphasis options into loaders and MDX rehype config.
packages/docs-infra/src/withDocsInfra/withDocsInfra.test.ts	Adds test coverage for the new emphasis option wiring.
packages/docs-infra/src/useCode/useFileNavigation.tsx	Adjusts `<Pre />` keys to force re-render across transform/enhancement phases.
packages/docs-infra/src/useCode/useCode.ts	Passes selected transform into file navigation for deterministic re-rendering.
packages/docs-infra/src/useCode/Pre.tsx	Computes initial visible frames, fixes frame indexing, and forwards `data-collapsible` + truncation/description attrs.
packages/docs-infra/src/pipeline/transformHtmlCodeBlock/transformHtmlCodeBlock.ts	Adds configurable emphasis defaults for authored code blocks and includes focus comment handling.
packages/docs-infra/src/pipeline/transformHtmlCodeBlock/transformHtmlCodeBlock.test.ts	Adds tests verifying default/overridden padding and focus max behavior.
packages/docs-infra/src/pipeline/parseSource/restructureFrames.ts	Updates frame indent/truncation handling using region indices and truncation metadata.
packages/docs-infra/src/pipeline/parseSource/restructureFrames.test.ts	Updates tests to include required `regionIndex` in ranges.
packages/docs-infra/src/pipeline/parseSource/parseSource.ts	Ensures unsupported grammars still get guttered HAST for enhancer compatibility.
packages/docs-infra/src/pipeline/parseSource/parseSource.test.ts	Updates expectations to match guttered output for unsupported content.
packages/docs-infra/src/pipeline/parseSource/createFrame.ts	Adds truncation metadata support and expands indent handling to focus frames.
packages/docs-infra/src/pipeline/parseSource/calculateFrameRanges.ts	Adds focus frame types, truncation splitting, per-directive overrides, validation, and auto-focus framing.
packages/docs-infra/src/pipeline/parseSource/addLineGutters.ts	Stores frame split size in HAST data for downstream reframing consistency.
packages/docs-infra/src/pipeline/parseSource/addLineGutters.test.ts	Adds assertions for new `frameSize` behavior.
packages/docs-infra/src/pipeline/loaderUtils/parseImportsAndComments.ts	Fixes line-number accounting after multi-line imports.
packages/docs-infra/src/pipeline/loaderUtils/parseImportsAndComments.test.ts	Adds regression test for comment line numbers after multi-line imports.
packages/docs-infra/src/pipeline/loadServerTypes/loadServerTypes.ts	Threads `codeBlockEmphasisOptions` through type highlighting + meta enhancement.
packages/docs-infra/src/pipeline/loadServerTypes/highlightTypesMeta.ts	Passes emphasis options into HTML code block transform in raw type descriptions/examples.
packages/docs-infra/src/pipeline/loadServerTypes/highlightTypesMeta.test.ts	Adds test ensuring emphasis options affect raw property description code blocks.
packages/docs-infra/src/pipeline/loadServerTypes/highlightTypes.ts	Allows passing emphasis options into code block transforms during types highlighting.
packages/docs-infra/src/pipeline/loadServerTypes/highlightTypes.test.ts	Adds test coverage for emphasis options applied to description code blocks.
packages/docs-infra/src/pipeline/loadServerTypes/snapshots/highlightTypes.test.ts.snap	Updates snapshots for new default frame typing (e.g. `focus`).
packages/docs-infra/src/pipeline/loadPrecomputedTypes/loadPrecomputedTypes.ts	Threads `codeBlockEmphasisOptions` to server types pipeline from loader options.
packages/docs-infra/src/pipeline/loadPrecomputedCodeHighlighter/loadPrecomputedCodeHighlighter.ts	Adds emphasis options support and includes focus directives among notable/removed comment prefixes.
packages/docs-infra/src/pipeline/loadCodeVariant/loadCodeVariant.ts	Ensures guttered HAST for plain-text path and runs enhancers consistently.
packages/docs-infra/src/pipeline/loadCodeVariant/loadCodeVariant.test.ts	Updates tests for guttered HAST behavior and parsing-disabled path.
packages/docs-infra/src/pipeline/lintJavascriptDemoFocus/lintJavascriptDemoFocus.ts	New ESLint rule to auto-insert focus annotations around demo “preview” sections.
packages/docs-infra/src/pipeline/lintJavascriptDemoFocus/lintJavascriptDemoFocus.test.ts	Adds extensive RuleTester coverage for rule detection and autofixes.
packages/docs-infra/src/pipeline/lintJavascriptDemoFocus/index.ts	Exports the new ESLint rule from the package entrypoint.
packages/docs-infra/src/abstractCreateDemo/abstractCreateDemo.tsx	Adds `sourceEnhancers` plumb-through to demo creation pipeline.
packages/docs-infra/src/CodeHighlighter/types.ts	Extends `HastRoot.data` with `collapsible` and `frameSize` metadata.
packages/docs-infra/package.json	Exposes new lint rule entrypoint and adds `@typescript-eslint/utils` dependency.
package.json	Adds workspace dependency on `@mui/internal-docs-infra` for eslint config import.
eslint.config.mjs	Registers the new rule for docs demos and enables it with `wrapReturn: true`.
docs/next.config.mjs	Configures demo emphasis defaults for docs site (padding + focus max size).
docs/functions/createDemo/index.ts	Updates dogfooding export to point at collapsible demo content.
docs/components/Tabs/Tabs.module.css	Minor padding tweak for tabs UI.
docs/app/docs-infra/pipeline/with-docs-infra/types.md	Documents new emphasis options on `withDocsInfra` and MDX options.
docs/app/docs-infra/pipeline/with-docs-infra/page.mdx	Adds usage docs for demo and code-block emphasis configuration.
docs/app/docs-infra/pipeline/transform-html-code-block/page.mdx	Documents new transform defaults and optional configuration.
docs/app/docs-infra/pipeline/page.mdx	Adds new “Lint JavaScript Demo Focus” section and updates emphasis outline.
docs/app/docs-infra/pipeline/load-server-types/page.mdx	Documents `codeBlockEmphasisOptions` for type metadata code blocks.
docs/app/docs-infra/pipeline/load-precomputed-types/page.mdx	Documents loader option for code block emphasis configuration.
docs/app/docs-infra/pipeline/lint-javascript-demo-focus/types.ts	Adds types page backing module for the new lint rule docs.
docs/app/docs-infra/pipeline/lint-javascript-demo-focus/types.md	Adds generated API docs for the new lint rule.
docs/app/docs-infra/pipeline/lint-javascript-demo-focus/page.mdx	Adds narrative docs for the new lint rule and its autofix behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/types.md	Updates emphasis types docs for new focus/truncation/override capabilities.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/useScrollAnchor.ts	New hook to keep scroll stable during expand/collapse transitions.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/max-size-code/index.ts	Adds new demo entry for focus max-size behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/max-size-code/MaxSizeCode.tsx	Adds demo source using focus/highlight directives for truncation behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/indent-code/IndentCode.tsx	Updates demo to use focus directives and include focus comment prefix handling.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/focus-code/FocusCode.tsx	Updates demo to use focus directives and include focus comment prefix handling.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/collapsible-demo/index.ts	Adds new collapsible demo entry.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/collapsible-demo/createDemo.ts	Creates local demo factory for collapsible demo.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/collapsible-demo/Counter.tsx	Adds demo component with focus + highlight directives.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/collapsible-code/CollapsibleCode.tsx	Wraps parsing section in focus annotations for demo presentation.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/IndentContent.tsx	Hooks expand/collapse to scroll anchoring behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/IndentContent.module.css	Updates styling for frames, truncation fade, and collapsible behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleDemoContent.tsx	Adds full demo UI (tabs/copy/variant/JS toggle) with no-JS expand/collapse + scroll anchoring.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleDemoContent.module.css	Styles the new collapsible demo UI, toggle, and frame behaviors.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleContent.tsx	Adds checkbox-based no-JS toggle and scroll anchoring integration.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleContent.module.css	Updates collapsible styles, truncation fade, and frame-level highlighting.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CodeMaxSize.tsx	Adds a server component demo using `focusFramesMaxSize` to force truncation behavior.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CodeIndent.tsx	Wraps rendered demo code in focus annotations for emphasis.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/Code.tsx	Wraps rendered demo code in focus annotations for emphasis.
docs/app/docs-infra/hooks/use-url-hash-state/demos/tab-navigation/TabNavigation.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/data-attr/Component.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks/TypesComponent.tsx	Adds focus annotations around the primary displayed section.
docs/app/docs-infra/hooks/use-types/demos/blocks/Component/ComponentRoot.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks/Component/ComponentPart.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks-inherited/TypesAlertDialog.tsx	Adds focus annotations around the primary displayed section.
docs/app/docs-infra/hooks/use-types/demos/blocks-inherited/Dialog/DialogTrigger.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks-inherited/Dialog/DialogClose.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks-inherited/AlertDialog/AlertDialogTrigger.tsx	Wraps return in focus annotation for single-line emphasis.
docs/app/docs-infra/hooks/use-types/demos/blocks-data-attr/TypesComponent.tsx	Adds focus annotations around the primary displayed section.
docs/app/docs-infra/hooks/use-types/demos/blocks-data-attr/Component/Root/ComponentRoot.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/blocks-data-attr/Component/Part/ComponentPart.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/basic/Component.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-types/demos/TypesTable.tsx	Adds focus annotations around main hook usage/rendering section.
docs/app/docs-infra/hooks/use-preference/demos/variant-selector/VariantSelector.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/hooks/use-copier/demos/text-input-copy/TextInputCopy.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/CheckboxBasic.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-provider/demos/fetch-demo/Docs.tsx	Adds focus annotations around provider + demo composition.
docs/app/docs-infra/components/code-provider/demos/fetch-demo/CodeProviderGitHub.tsx	Adds focus annotations around `CodeProvider` wrapper.
docs/app/docs-infra/components/code-provider/demos/base/BasicCode.tsx	Adds focus annotations around provider wrapper.
docs/app/docs-infra/components/code-provider/demos/Code.tsx	Adds focus annotations around `CodeHighlighter` wrapper.
docs/app/docs-infra/components/code-highlighter/types.md	Updates docs for extended `HastRoot.data` shape.
docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/CheckboxBasic.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/tailwind/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/CheckboxBasic.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx	Adds focus annotations around primary content block.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/tailwind/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx	Adds focus annotations around primary content block.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.tsx	Adds focus annotation around preview return value.
docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx	Adds focus annotations around primary content block.
docs/app/docs-infra/components/code-highlighter/demos/code-transformed/Code.tsx	Adds focus annotations around `CodeHighlighter` wrapper.
docs/app/docs-infra/components/code-highlighter/demos/code-transformed/BasicCode.tsx	Adds focus annotation around preview usage.
docs/app/docs-infra/components/code-highlighter/demos/code-highlight-init/Code.tsx	Adds focus annotations around `CodeHighlighter` wrapper.
docs/app/docs-infra/components/code-highlighter/demos/code-highlight-init/BasicCode.tsx	Adds focus annotation around preview usage.
docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/Code.tsx	Adds focus annotations around `CodeHighlighter` wrapper.
docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/BasicCode.tsx	Adds focus annotation around preview usage.
docs/app/docs-infra/components/code-highlighter/demos/code-basic/BasicCode.tsx	Adds focus annotation around preview usage.
docs/app/docs-infra/components/code-highlighter/demos/DemoContent.tsx	Adds focus annotations around main hook usage/rendering section.
docs/app/docs-infra/components/code-highlighter/demos/DemoContent.module.css	Updates styling for frame-based emphasis and `<mark>` highlight rendering.
docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx	Adds focus annotations around main hook usage/rendering section.
docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css	Updates styling for frame-based emphasis, `<mark>` highlights, and truncation rounding.
docs/app/docs-infra/components/code-highlighter/demos/CodeBlock.tsx	Adds focus annotations around `CodeHighlighter` wrapper.
docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileEditor.tsx	Adds focus annotations around provider/controller composition.
docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx	Adds focus annotations around main code navigation/selection logic.
docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx	Adds JSX focus annotations around the interactive preview region.
docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx	Adds focus annotations around main demo logic.
docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css	Updates styling for frame-based emphasis and block layout.
docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLive.tsx	Adds focus annotations around provider/controller composition.
docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoController.tsx	Adds focus annotations around main controller logic.
docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx	Adds focus annotations around main editor logic.
docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css	Updates styling for frame-based emphasis and block layout.
docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditor.tsx	Adds focus annotations around provider/controller composition.
docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeController.tsx	Adds focus annotations around main controller logic.
docs/app/bench/docs-infra/components/code-highlighter/demos/code/page.tsx	Adds focus annotations around benchmark code highlighter instance.
docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContentLoading.tsx	Adds JSX focus annotations around the code preview block.
docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContent.tsx	Adds focus annotations around main hook usage/rendering section.
.circleci/orbs/code-infra.yml	Ensures docs-infra is built before running ESLint so the new plugin can be imported.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Janpot · 2026-04-22T10:15:24Z

Breaking changes

CSS needs to be updated to also support highlighting .frame instead of only .line

@highlight-text produces elements

Let's update dependent repos before merging this so that this isn't breaking anymore?

dav-is · 2026-04-22T18:42:49Z

Let's update dependent repos before merging this so that this isn't breaking anymore?

After this is merged, this PR fixes the breaking changes: https://github.com/mui/base-ui/pull/4659/changes

Other Base UI repos will just have to be synced

Co-authored-by: Copilot <copilot@github.com>

Janpot · 2026-04-24T07:30:09Z

      '@next/next/no-img-element': 'off',
    },
  },
+  {


Can you already create a factory function like we do for the base config to distribute docs eslint configuration? We can then migrate the existing createDocConfig to the @mui/internal-docs-infra now or in a follow-up.

I think we should take care of this in a followup PR since this PR only adds a single lint rule for the time being

Add lintJavascriptDemoFocus eslint plugin

16c9fbf

dav-is added type: new feature Expand the scope of the product to solve a new problem. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Apr 11, 2026

oliviertassinari deployed to docs-infra/add-linter - mui-tools-public PR #1303 April 11, 2026 01:56 — with Render View deployment

oliviertassinari deployed to docs-infra/add-linter - code-infra-dashboard PR #1303 April 11, 2026 01:56 — with Render View deployment

dav-is changed the title ~~Add lintJavascriptDemoFocus ESLint Rule~~ [docs-infra] Add lintJavascriptDemoFocus ESLint Rule Apr 11, 2026

dav-is mentioned this pull request Apr 11, 2026

[docs-infra] Migrate Material UI Repo to Improved Demos #1145

Open

11 tasks

Add @focus-start, @focus-end

e8eff01

dav-is added 2 commits April 15, 2026 19:59

handle interplay between focus and highlighted portions

da68d0a

Add emphasis config

f3f0047

dav-is changed the title ~~[docs-infra] Add lintJavascriptDemoFocus ESLint Rule~~ [docs-infra] Add @focus and Linter to Automatically Apply Apr 16, 2026

dav-is added 3 commits April 15, 2026 22:19

Allow @padding and @min override

807ab40

Always return some focus

7ed37da

Update focusFramesMaxSize to 18

1e22879

brijeshb42 reviewed Apr 16, 2026

View reviewed changes

Comment thread packages/docs-infra/src/pipeline/lintJavascriptDemoFocus/index.ts

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 16, 2026

Merge branch 'master' into docs-infra/add-linter

b10a420

oliviertassinari deployed to docs-infra/add-linter - mui-tools-public PR #1303 April 16, 2026 16:28 — with Render View deployment

oliviertassinari deployed to docs-infra/add-linter - code-infra-dashboard PR #1303 April 16, 2026 16:28 — with Render View deployment

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 16, 2026

pnpm dedupe

4bb784d

oliviertassinari deployed to docs-infra/add-linter - mui-tools-public PR #1303 April 16, 2026 16:47 — with Render View deployment

dav-is added 5 commits April 16, 2026 13:51

Use <mark> for @highlight-text

717d5b8

Update docs

fd28123

Reorder sections

66edfb8

Improve cases where of @highlight @focus

908392b

Automatically add appropriate padding

efcc298

oliviertassinari deployed to docs-infra/add-linter - code-infra-dashboard PR #1303 April 20, 2026 15:50 — with Render View deployment

oliviertassinari temporarily deployed to docs-infra/add-linter - mui-tools-public PR #1303 April 20, 2026 15:50 — with Render Destroyed

dav-is added 6 commits April 20, 2026 12:34

Fix scroll jumping

9289526

Improve scroll anchor performance

fbeacfd

Fix horizontal scroll animation

26f0a0c

Fix truncated fade css

650727f

Fix first render

cc673ce

Merge branch 'master' into docs-infra/add-linter

95a8b6a

oliviertassinari deployed to docs-infra/add-linter - code-infra-dashboard PR #1303 April 21, 2026 12:27 — with Render View deployment

dav-is added 2 commits April 21, 2026 10:14

Add emphasis options for code blocks

c89941d

Merge branch 'docs-infra/add-linter' of github.com:mui/mui-public int…

759a5ad

…o docs-infra/add-linter

oliviertassinari temporarily deployed to docs-infra/add-linter - code-infra-dashboard PR #1303 April 21, 2026 14:14 — with Render Destroyed

dav-is requested a review from Copilot April 21, 2026 14:16

Copilot started reviewing on behalf of dav-is April 21, 2026 14:17 View session

Update page index and types.md

0b84ea1

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Comment thread docs/app/docs-infra/pipeline/lint-javascript-demo-focus/types.md Outdated

Comment thread docs/app/docs-infra/pipeline/lint-javascript-demo-focus/page.mdx Outdated

Comment thread docs/app/docs-infra/pipeline/enhance-code-emphasis/types.md Outdated

dav-is mentioned this pull request Apr 21, 2026

[docs-infra] Fix Emphasized Code Loading State mui/base-ui#4659

Open

Fix type export

79f786a

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 22, 2026

Merge branch 'master' into docs-infra/add-linter

62f565b

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 22, 2026

dav-is and others added 3 commits April 22, 2026 17:59

bump version

4e7fd55

Code Review

07fc497

Co-authored-by: Copilot <copilot@github.com>

Hide visibility when collapsed

2a0ecc4

Co-authored-by: Copilot <copilot@github.com>

Janpot reviewed Apr 24, 2026

View reviewed changes

Janpot approved these changes Apr 24, 2026

View reviewed changes

dav-is merged commit baded47 into master Apr 24, 2026
13 checks passed

dav-is deleted the docs-infra/add-linter branch April 24, 2026 13:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs-infra] Add `@focus` and Linter to Automatically Apply#1303

[docs-infra] Add `@focus` and Linter to Automatically Apply#1303
dav-is merged 50 commits intomasterfrom
docs-infra/add-linter

dav-is commented Apr 11, 2026 •

edited

Loading

Uh oh!

code-infra-dashboard Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Janpot commented Apr 22, 2026

Uh oh!

dav-is commented Apr 22, 2026 •

edited

Loading

Uh oh!

Janpot Apr 24, 2026

Uh oh!

dav-is Apr 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

dav-is commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New: @focus annotation

New: lintJavascriptDemoFocus ESLint plugin

enhanceCodeEmphasis improvements

Collapsible code UI

parseSource / calculateFrameRanges updates

Other changes

Breaking changes

Screenshots

Uh oh!

code-infra-dashboard Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Performance

Bundle size

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Janpot commented Apr 22, 2026

Uh oh!

dav-is commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Janpot Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

dav-is Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dav-is commented Apr 11, 2026 •

edited

Loading

New: `@focus` annotation

New: `lintJavascriptDemoFocus` ESLint plugin

`enhanceCodeEmphasis` improvements

`parseSource` / `calculateFrameRanges` updates

code-infra-dashboard Bot commented Apr 15, 2026 •

edited

Loading

dav-is commented Apr 22, 2026 •

edited

Loading

dav-is Apr 24, 2026 •

edited

Loading